<template>
  <div id="app">
		<sellHeader1 :seller="seller"></sellHeader1>
		<div class="tab">
			<ul>
				<li><router-link to="/splb">商品</router-link></li>
				<li><router-link to="/pj">评论</router-link></li>
				<li><router-link to="/dp">商家</router-link></li>
			</ul>
		</div>
	  <!-- 路由匹配到的组件将渲染在这里 -->
	  <!--将seller对象传给组件-->
	  <router-view :seller="seller"></router-view>
  </div>
</template>

<script>
import sellHeader from './components/header/header'

export default {
  name: 'app',
  data(){
  	return {
  		seller:{}
  	}
  },
  components:{
  	sellHeader1:sellHeader
  },
	created(){
		this.$http.get('/api/api-seller').then(function(res){
			this.seller = res.body.seller1;
		})
	}  
}
</script>

<style>
html,body{
	margin: 0;
	padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
ul{
	margin: 0;
	padding: 0;	
	list-style: none;
}
h1,h2,p{
	padding: 0;
	margin: 0;
}
.tab ul{
	display: flex;
	width: 100%;
	height: 40px;
	line-height: 40px;
}
.tab ul li{
	flex: 1;
	text-align: center;
	border-bottom: 1px solid rgba(7,17,27,0.1);
}
.tab ul li a{
	display: block;
	text-decoration: none;
	font-size: 14px;
	color: rgb(77,85,93);
}
.tab ul li a.active{
	color: rgb(240,20,20);
}
</style>
